<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head th:include="/common/inc::header"/>
<body>
<!--主体-->
<link rel="stylesheet" href="/css/login.css">
<div class="login-layout">
    <div class="top">
        <h5>大明山旅游平台<em></em></h5>
        <h2>PC版-数据中心</h2>
    </div>
    <form method="post" class="layui-form" id="form_login">
        <div class="lock-holder">
            <div class="form-group pull-left input-username">
                <label>账号</label>
                <input name="account" id="user_name" autocomplete="off" type="text" class="input-text"
                       lay-verify="required" value="" required>
            </div>
            <i class="fa fa-ellipsis-h dot-left"></i> <i class="fa fa-ellipsis-h dot-right"></i>
            <div class="form-group pull-right input-password-box">
                <label>密码</label>
                <input name="password" id="password" class="input-text" autocomplete="off" type="password" required
                       lay-verify="required" pattern="[\S]{6}[\S]*" title="密码不少于6个字符">
            </div>
        </div>
        <div class="avatar"><img src="/css/images/login/admin.png" alt=""></div>
        <div class="submit">
            <span>
            <div class="code">
                <div class="arrow"></div>
                <div class="code-img">
                    <img src="captcha" alt="点击更换" title="点击更换" onclick="this.src='captcha?time='+Math.random()"
                         class="captcha" name="codeimage" id="codeimage" border="0"/>
                </div>
                <a href="JavaScript:void(0);" id="hide" class="close" title="关闭"><i></i></a><a
                    href="JavaScript:void(0);"
                    onclick="javascript:document.getElementById('codeimage').src='captcha?time='+Math.random()"
                    class="change" title="看不清,点击更换验证码"><i></i></a>
            </div>
            <input name="verifyCode" required lay-verify="required" type="text" class="input-code" id="captcha"
                   placeholder="输入验证" pattern="[A-z0-9]{4}" title="验证码为4个字符" autocomplete="off" value="">
            </span>
            <span>
              <input name="" class="input-button btn-submit" type="button" value="登录">
            </span>
        </div>
        <div class="submit2">
            <div class="progress">
                <div class="progress-bar progress-bar-success" aria-valuetransitiongoal="100"></div>
            </div>
        </div>
    </form>
    <div class="bottom">
    </div>
</div>
<!--页面JS脚本-->
<script th:replace="/common/inc::incJs"></script>
<script src="/js/jquery.supersized.min.js"></script>
<script src="/js/jquery.progressBar.js"></script>
<script>
    $(function () {
        $.supersized({
            // 功能
            slide_interval: 4000,
            transition: 1,
            transition_speed: 1000,
            performance: 1,
            // 大小和位置
            min_width: 0,
            min_height: 0,
            vertical_center: 1,
            horizontal_center: 1,
            fit_always: 0,
            fit_portrait: 1,
            fit_landscape: 0,
            // 组件
            slide_links: 'blank',
            slides: [
                {image: '/css/images/login/1.jpg'},
                {image: '/css/images/login/2.jpg'},
                {image: '/css/images/login/3.jpg'},
                {image: '/css/images/login/4.jpg'},
                {image: '/css/images/login/5.jpg'}
            ]
        });
        //显示隐藏验证码
        $("#hide").click(function () {
            $(".code").fadeOut("slow");
        });
        $("#captcha").focus(function () {
            $(".code").fadeIn("fast");
        });
        //跳出框架在主窗口登录
        if (top.location != this.location) top.location = this.location;
        $('#user_name').focus();
        //   $("#captcha").nc_placeholder();
        //动画登录
        $('.btn-submit').click(function (data) {
            $('.input-username,dot-left').addClass('animated fadeOutRight');
            $('.input-password-box,dot-right').addClass('animated fadeOutLeft');
            $('.btn-submit').addClass('animated fadeOutUp');
            setTimeout(function () {
                    $('.avatar').addClass('avatar-top');
                    $('.submit').hide();
                    $('.submit2').show();
                    $('.progress .progress-bar').progressbar({
                        done: function () {
                            $.ajax({
                                url: "loginCheck",
                                type: "post",
                                data: $("#form_login").serialize(),
                                success: function (info) {
                                    if (info.code < 0) {
                                        $('.submit2').hide();
                                        $('.submit').show();
                                        $('.avatar').removeClass('avatar-top');
                                        $('.input-username,dot-left').removeClass('animated fadeOutRight');
                                        $('.input-password-box,dot-right').removeClass('animated fadeOutLeft');
                                        $('.btn-submit').removeClass('animated fadeOutUp');
                                        layer.msg(info.message);
                                        return false;
                                    }
                                    location.href = info.body;
                                }
                            });
                        }
                    });
                },
                300);
        });
        // 回车提交表单
        $('#form_login').keydown(function (event) {
            if (event.keyCode == 13) {
                $('.btn-submit').click();
            }
        })
    });
</script>
</body>
</html>

